<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    input {
      outline: none;
    }

    body {
      height: 3000px;
      background: #ccc;
    }

    .header-con {
      margin: 0 auto;
      height: 100px;
      width: 1200px;
      background: orange;
    }

    .nav-con {
      margin: 0 auto;
      height: 200px;
      width: 1200px;
      background: yellow;
    }

    #search {
      position: relative;
      height: 100px;
      width: 100%;
      background: #fff;
    }

    .search-con {
      padding-top: 1px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0 auto;
      width: 1200px;
      height: 100px;
      /* background: red; */
    }

    .logo {
      margin: 27px 0 0 20px;
      float: left;
      height: 54px;
      width: 126px;
      /* background: yellow;q */
    }

    .logo img {
      width: 100%;
      height: 100%;
    }

    .ad {
      position: relative;
      float: right;
      margin-top: 10px;
      margin-right: 98px;
      width: 67px;
      height: 79px;
      border: 1px solid #ccc;
      /* background: green; */
      text-align: center;
    }

    .ad span {
      margin: 4px 0 2px 0;
      font-size: 12px;
      line-height: 12px;
      color: #ff5000;
      text-align: center;
    }

    .ad a {
      display: block;
      width: 56px;
      height: 56px;
      margin-left: 6px;
    }

    .ad a img {
      width: 100%;
      height: 100%;
    }

    .closeBtn {
      position: absolute;
      top: -1px;
      left: -15px;
      width: 13px;
      height: 13px;
      border: 1px solid #ccc;
      border-right: none;
      text-align: center;
      font-size: 10px;
      line-height: 11px;
      color: #e3e5e3;
    }

    /* 淘宝搜索模块之选项卡 */
    .tab {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 10px auto;
      width: 630px;
      height: 75px;
      z-index: 0;
    }

    .tab_hd {
      height: 20px;
    }

    .tab_hd a {
      margin: 0 4px;
      float: left;
      width: 33px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-decoration: none;
      color: #ff4400;
      text-align: center;
    }

    .tab_hd a:nth-child(1) {
      margin-left: 14px;
    }

    .active {
      border-radius: 2px 2px 0 0;
      background: linear-gradient(to right, #ff8f00, #ff5100);
      color: #fff !important;
    }

    .tab_td {
      margin-top: 43px;
      height: 12px;
      line-height: 12px;
    }

    .tab_td .tab-con {
      display: none;
      font-size: 12px;
      color: #3c3c3c;
    }

    .tab_td .conActive {
      display: block;
    }

    .tab-con a {
      float: left;
      margin-right: 6px;
      text-decoration: none;
      font-size: 12px;
      line-height: 12px;
      color: #3c3c3c;
    }

    .tab-con a:hover {
      color: #ff5000;
    }

    .a_orange {
      color: #ff5000 !important;
    }

    /* 搜索模块 */
    .search-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 30px auto;
      width: 630px;
      height: 40px;
      background: #ff8500;
      border-radius: 20px;
    }

    .searchInp {
      padding-left: 20px;
      float: left;
      border: 0;
      width: 536px;
      height: 36px;
      border: 2px solid #ff5000;
      border-right: none;
      border-radius: 20px 0 0 20px;
      background: #fff;
    }

    .search-btn {
      float: left;
      border: 0;
      width: 72px;
      height: 40px;
      border-radius: 0 20px 20px 0;
      background: linear-gradient(to right, #ff8f00, #ff5100);
    }
  </style>
</head>

<body>

  <div class="header-con">1</div>
  <div class="nav-con">2</div>
  <div id="search">
    <div class="search-con">
      <h1 class="logo"><a href="###"><img src="./image/taobao_03.jpg" alt=""></a></h1>
      <!-- 选项卡 -->
      <div class="tab">
        <div class="tab_hd">
          <a class="active" href="###">宝贝</a>
          <a href="###">天猫</a>
          <a href="###">店铺</a>
        </div>
        <div class="tab_td">
          <div class="tab-con conActive">
            <a href="###">新款连衣裙</a>
            <a href="###">四件套</a>
            <a class="a_orange" href="###">潮流T恤</a>
            <a href="###">时尚女靴</a>
            <a href="###">短裤</a>
          </div>
          <div class="tab-con"></div>
          <div class="tab-con">
            <a href="###">新款连衣裙</a>
            <a href="###">四件套</a>
            <a class="a_orange" href="###">潮流T恤</a>
            <a href="###">时尚女靴</a>
            <a href="###">短裤</a>
          </div>
        </div>
      </div>
      <!-- 广告 -->
      <div class="ad">
        <div class="closeBtn">x</div>
        <span>手机淘宝</span>
        <a href="###"><img src="./image/erweima_03.jpg" alt=""></a>
      </div>
      <!-- 搜索框 -->
      <div class="search-box">
        <input class="searchInp" type="text" placeholder="连衣裙。。。">
        <button class="search-btn">搜索</button>
      </div>
    </div>
  </div>



  <script>
    let search = document.querySelector("#search") //外盒子
    let search_con = document.querySelector(".search-con") //搜索框
    let search_box = search_con.querySelector(".search-box") //内盒子
    let searchInp = search.querySelector(".search-box .searchInp") //搜索表单
    let logo = document.querySelector(".logo") //logo
    let ad = search_con.querySelector(".ad") //广告
    let closeBtn = search_con.querySelector(".ad .closeBtn") //关闭广告按钮
    let tab = search_con.querySelector(".tab"); //选项卡
    let aList = tab.querySelectorAll(".tab_hd a") //选项卡的导航
    let conList = tab.querySelectorAll(".tab_td .tab-con") //选项卡对应内容

    //1：添加滚动事件
    window.onscroll = function () {
      //浏览器卷去的高度
      if (scrollY >= 300) {
        //这是外盒子
        search.style.position = "fixed"
        search.style.top = 0
        search.style.background = "#fff"
        search.style.height = 50 + "px"
        //这是内盒子
        search_con.style.height = 50 + "px"
        search_box.style.marginTop = 5 + "px"
        //logo变小
        logo.style.height = 30 + "px"
        logo.style.width = 70 + "px"
        logo.style.marginTop = 5 + "px"
        //广告区域
        ad.style.display = "none"
        //选项卡
        tab.style.display = "none"
      } else {
        //这是外盒子
        search.style.position = "relative"
        search.style.height = 100 + "px"
        //这是内盒子
        search_con.style.height = 100 + "px"
        search_box.style.marginTop = 30 + "px"
        //logo变大
        logo.style.height = 54 + "px"
        logo.style.width = 126 + "px"
        logo.style.marginTop = 27 + "px"
        //广告区域
        ad.style.display = "block"
        //选项卡
        tab.style.display = "block"
      }
    }
    //自动聚焦
    searchInp.focus();
    //关闭广告
    closeBtn.onclick = function () {
      ad.style.display = "none"
    }
    //选项卡
    aList.forEach(function (items, i) {
      aList[i].onclick = function () {
        //自动聚焦 点击的时候，实现搜索表单的自动聚焦
        searchInp.focus();
        aList.forEach(function (items, i) {
          aList[i].className = ""
          conList[i].className = "tab-con"
        })
        this.className = "active"
        conList[i].className = "tab-con conActive"
      }
    })
  </script>
</body>

</html>